<template>
    <div class="sidebar">
        <el-menu :default-active="onRoutes" class="el-menu-vertical-demo" background-color="#324157" text-color="#bfcbd9" active-text-color="#20a0ff" unique-opened router>
            <template v-for="(item, index) in groups">
                <el-submenu v-bind:index="index">
                    <template slot="title"><i class="el-icon-menu"></i>{{item}}</template>
                    <template v-for="(value, key) in menuList[item]">
                        <el-menu-item v-bind:index="key">{{value}}</el-menu-item>
                    </template>
                </el-submenu>
            </template>
        </el-menu>
    </div>
</template>

<script>
    import api from '../../api/api'

    export default {
        data() {
            return {
                menuList: [],
                groups:[]
            }
        },
        computed:{
            onRoutes(){
                return this.$route.path.replace('/','');
            }
        },
        methods: {
            getSideBarList(){
                var that = this;
                var sUserName = localStorage.getItem('sUserName');
                var iAccountId=localStorage.getItem('iAccountId');
                var options = {
                    sUserName:sUserName,
                    iAccountId:iAccountId
                }
                api.getUrlRightList(options).then((res) => {
                    if(res.ret==0){
                        that.menuList = res.content;
                        var groups = Object.keys(that.menuList);
                        var liObj = {};
                        for(var i=0,j=groups.length;i<j;i++){
                            liObj[(i+1)+""] = groups[i];
                        }
                        that.groups = liObj;
                    }
                }).catch(e => {
                    that.$message({
                        type: 'error',
                        message: '获取菜单列表失败！'
                    });
                });
            }
        },
        mounted() {
            this.getSideBarList();
        }
    }
</script>

<style scoped>
    .sidebar{
        display: block;
        position: absolute;
        width: 250px;
        left: 0;
        top: 70px;
        bottom:0;
        background: #2E363F;
    }
    .sidebar > ul {
        height:100%;
    }
</style>
